<template>
  <FormTitle title="订单信息" />
  <div>
    <div class="flex flex-wrap order-info">
      <Descriptions label-width="100px" label="系统订单号" :value="info.order_sn" />
      <Descriptions label-width="100px" label="平台订单号" :value="info.platform_order_sn" />
    </div>
    <div class="flex flex-wrap order-info">
      <Descriptions label-width="100px" v-for="item in orderInfo" :key="item.label" :label="item.label">
        <template #value>
          {{ info?.[item.field] || "-" }}
          <span v-if="item.currency">{{ info.original_order_currency || "" }}</span>
          <br />
        </template>
      </Descriptions>
    </div>
  </div>

  <div class="form-title">
    退款信息
    <div class="status">{{ info.refund_status_desc }}</div>
  </div>

  <div class="flex flex-wrap order-info">
    <Descriptions label-width="100px" v-for="item in returnInfo" :key="item.label" :label="item.label">
      <template #value>
        {{ info?.[item.field] || "-" }}
        <span v-if="item.currency">{{ info.original_order_currency || "" }}</span>
        <br />
      </template>
    </Descriptions>
  </div>

  <FormTitle title="退款产品" />
  <RefundProduct ref="productRef" :data="info?.items" :disabled="true" />

  <FormTitle title="退款信息" />
  <div class="flex flex-wrap order-info order-desc">
    <Descriptions label-width="100px" label="退款原因">
      <template #value>{{ info.primary_cause }} {{ info.secondary_cause }}</template>
    </Descriptions>
    <Descriptions label-width="100px" label="退款金额">
      <template #value> {{ info.original_order_currency || "USD" }} {{ info.refund_amount }} ({{ info.tax_included ? "含税金额" : "不含税金额" }})</template>
    </Descriptions>

    <Descriptions label-width="100px" label="平台退款原因" :value="info.platform_refund_reason_desc" v-if="info.platform_id == 1" />

    <Descriptions label-width="100px" label="存在纠纷">
      <template #value> {{ info.is_dispute_desc }}; {{ info.is_dispute ? info.dispute_type_desc : "" }} </template>
    </Descriptions>

    <Descriptions label-width="100px" label="货物处理" :value="info.cargo_handler_desc" />
    <template v-if="info.cargo_handler">
      <Descriptions label-width="100px" label="退件仓库">
        <template #value> {{ info.return_warehouse }} ({{ info.is_generate_return ? "自动生成退件单" : "不自动生成退件单" }}) </template>
      </Descriptions>
      <Descriptions label-width="100px" label="退件追踪号" :value="info.tracking_number" />
    </template>
  </div>
  <Descriptions label-width="100px" label="客户退款描述" :value="info.customer_refund_description" />
  <!-- <Descriptions label-width="100px" label="退款备注" :value="info.refund_remark" /> -->
</template>

<script setup>
import FormTitle from "@/components/XForm/FormTitle.vue"
import Descriptions from "@/components/Descriptions/index.vue"
import RefundProduct from "./RefundProduct/index.vue"
const props = defineProps({
  info: { type: Object, default: () => ({}) },
})
const orderInfo = [
  { label: "平台/站点", field: "platformAll" },
  { label: "店铺", field: "shop" },
  { label: "下单时间", field: "order_time" },
  { label: "订单来源", field: "build_order_type" },
  { label: "订单类型", field: "order_type_desc" },
  { label: "发货状态", field: "shipping_status_desc" },
  { label: "订单金额", field: "order_amount", currency: true },
  { label: "已退金额", field: "refund_amount_show", currency: true },
]
const returnInfo = [
  { label: "退款类型", field: "refund_channel_desc" },
  { label: "退款方式", field: "refund_method_desc" },
  { label: "退款银行", field: "refund_bank" },
  { label: "收款人", field: "payee" },
  { label: "收款账户", field: "accounts_receivable" },
]

defineExpose({})
</script>

<style lang="scss" scoped>
.order-info {
  :deep(.value) {
    min-width: 180px;
  }
}
.order-desc {
  :deep(.value) {
    min-width: 300px;
  }
}
.form-title {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  // color: #0a1431;
  line-height: 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  .status {
    padding: 1px 2px;
    margin-left: 4px;
    font-size: 8px;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
    background: #faad14;
    border-radius: 4px 4px 4px 0px;
  }
  &:before {
    content: "";
    width: 2px;
    height: 14px;
    background: #3487ff;
    margin-right: 4px;
  }
}
</style>
